<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .preference {
            display: flex;
            justify-content: space-between;
            width: 60%;
            margin: .5rem;
        }
    </style>
</head>

<body>

    <!-- 将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和  <input> 的 id 一样。 -->

    <div>
        <div class="preference">
            <label for="cheese">Do you like cheese?</label>
            <input type="checkbox" name="cheese" id="cheese">
        </div>
        <div class="preference">
            <label for="peas">Do you like peas?</label>
            <input type="checkbox" name="peas" id="peas">
        </div>
    </div>

    <!-- 你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在： -->
    <label>
        Do you like peas?
        <input type="checkbox" name="peas">
    </label>

</body>

</html>

<!-- <label> -->
<!-- HTML <label> 元素（标签）表示用户界面中某个元素的说明。 -->

<!-- for -->
<!-- 即和 <label> 元素在同一文档中的 可关联标签的元素 的 id。 文档中第一个 id 值与 <label> 元素 for 属性值相同的元素，如果可关联标签（labelable），则为已关联标签的控件，其标签就是这个 <label> 元素。如果这个元素不可关联标签，则 for 属性没有效果。如果文档中还有其他元素的 id 值也和 for 属性相同，for 属性对这些元素也没有影响。 -->
<!-- 注意：<label> 元素可同时有一个 for 属性和一个子代控件元素，只是 for 属性需要指向这个控件元素。 -->
<!-- form -->
<!-- 表示与 label 元素关联的 <form> 元素（即它的表单拥有者）。如果声明了该属性，其值应是同一文档中 <form> 元素的 id。因此你可以将 label 元素放在文档的任何位置，而不仅作为 <form> 元素的后代。 -->

<!-- <label>, <input> 和 <textarea> 元素 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/textarea -->